import React, { Component } from 'react'
import { Button } from 'antd'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'
import { nanoid } from 'nanoid'
import './index.css'

class Person extends Component {

  handleAddPerson = () => {
    this.props.addPerson({ id: nanoid(), name: this.pName.value, age: this.pAge.value * 1 })
    this.pName.value = ''
    this.pAge.value = ''
  }

  render() {
    return (
      <div className='person'>

        <h2>Person   Count组件中的和:{this.props.count}</h2>
        <input ref={c => this.pName = c} type="text" />
        <input ref={c => this.pAge = c} type="text" />
        <Button type='primary' onClick={this.handleAddPerson}>添加</Button>
        <ul>
          {this.props.persons.map(item => {
            return <li key={item.id}>姓名: {item.name} 年龄: {item.age}</li>
          })}
        </ul>
      </div>
    )
  }
}


export default connect(
  state => ({ persons: state.persons, count: state.count }),
  { addPerson }
)(Person)
